* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    width: 100%;
}

body {
    background-image: url(./imgs/54.png);
    background-size: 100px 100px;
    overflow: hidden;
}

/*  主体 盒子 */

.wrapper {
    width: 700px;
    /*border: 1px solid #abcdef;*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 200px;
    /* display: flex; */
}

/* 左侧主体 */

.inner_main {
    width: 600px;
    height: 340px;
    padding: 40px;
    position: relative;
    background-color: aliceblue;
}

/* title */

.inner_title {
    color: #de467c;
    text-align: right;
    font-weight: 500;
}

/* 轮播图主体 */

.silde_main {
    height: 100%;
    /* padding: 40px; */
}

/* 每个轮播 样式 */

.silde_item {
    height: 100%;
    width: 100%;
    position: relative;
    text-align: right;
}

/* 每个轮播的 图片部分样式 */

body .wrapper .inner_main .silde_item .silde_img {
    width: 235px;
    position: absolute;
    bottom: -40px;
    left: -300px;
    opacity: 0;
    transition: all 500ms 0ms cubic-bezier(0.175, 1.605, 0.455, 0.92);
    z-index: 9;
}

/* .silde_item>.silde_img:nth-of-type(1) {
    bottom: -40px;
    left: -96px;
} */

/* .silde_item>.silde_img:nth-of-type(2) > img {
    display: none;
    filter: drop-shadow(-4px 6px 6px rgba(0, 0, 0, 0.2));
} */

/* .silde_item>.silde_img:nth-of-type(3) {
    display: none;
}

.silde_item>.silde_img:nth-of-type(4) {
    display: none;
} */

.silde_item>.silde_img>img {
    width: 100%;
    /* position: relative; */
    z-index: 9;
}

/* 每个轮播 的 文字样式 */

.silde_item>.silde_text {
    position: absolute;
    display: inline-block;
    font-family: 'Amatic SC', cursive;
    font-size: 22px;
    left: 165px;
    width: 66%;
    text-align: left;
}

.silde_item>.silde_text>.name {
    margin-bottom: 10px;
    color: #94619c;
}

.silde_item>.silde_text>.price {
    margin-bottom: 10px;
    color: #f40;
}

.silde_item>.silde_text>p {
    margin-bottom: 20px;
    font-family: 'Bad Script', cursive;
    line-height: 22px;
    color: #9e9da7;
    font-size: 12px;
    position: relative;
}

/* 购买按钮 */

#buy {
    display: none;
}

.buy_box {
    margin-left: 22px;
}

.buy {
    cursor: pointer;
    display: inherit;
    padding: 10px 20px;
    border-radius: 255px 15px 205px 35px/35px 225px 35px 255px;
    font-family: 'Amatic SC', cursive;
    background: #de467c;
    color: white;
    width: 25px;
    text-align: Center;
    position: relative;
    z-index: 10;
    /* -webkit-transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605, 0.455, 0.92); */
    /* transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605 */
}

/* 底部宣传图 */

.main_img {
    position: absolute;
    pointer-events: none;
    width: 344px;
    bottom: -70px;
    right: 58px;
    z-index: 10;
}

/* 旋转特效 */

.rotate {
    position: absolute;
    bottom: -135px;
    left: -165px;
    width: 450px;
    animation: rotate 8s linear infinite;
    opacity: 0.4;
}

/*右侧 按钮样式*/

label.btn_for {
    display: inline-block;
    position: absolute;
}

label.btn_for:nth-of-type(1) {
    top: 0;
    right: -20px;
}

label.btn_for:nth-of-type(2) {
    top: 64px;
    right: -20px;
}

label.btn_for:nth-of-type(3) {
    top: 128px;
    right: -20px;
}

label.btn_for:nth-of-type(4) {
    top: 192px;
    right: -20px;
}

label>div {
    height: 68px;
    width: 120px;
    background: #de467c;
    position: relative;
    border-radius: 265px 35px 185px 14px/8px 235px 12px 255px;
    line-height: 68px;
    text-align: center;
    font-family: 'Bad Script', cursive;
    color: #fefefe;
    transition: padding 500ms;
}

label[for="right_btn1"], label[for="right_btn2"], label[for="right_btn3"], label[for="right_btn4"] {
    z-index: 10;
}

label[for="right_btn1"]:hover, label[for="right_btn2"]:hover, label[for="right_btn3"]:hover, label[for="right_btn4"]:hover {
    cursor: pointer;
}

label[for="right_btn1"]:hover>div, label[for="right_btn2"]:hover>div, label[for="right_btn3"]:hover>div, label[for="right_btn4"]:hover>div {
    background: #94619c;
    padding-left: 8px;
}

label>div:nth-of-type(2) {
    border-radius: 195px 35px 155px 3px/19px 265px 25px 235px;
}

label>div:nth-of-type(3) {
    border-radius: 265px 15px 205px 1px/0px 225px 35px 245px;
}

label>div:nth-of-type(4) {
    border-radius: 195px 9px 177px 3px/49px 275px 65px 235px;
}

input {
    position: absolute;
}

input:checked+label>div {
    background: #d02562;
}

/* 图片滑动模块 */

/* 图片滑动模块 1 */

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) {
    transition: all 0.5s 0.35s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -96px;
    opacity: 1;
}

/* 图片滑动模块 2 */

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) {
    transition: all 0.5s 0.35s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -96px;
    opacity: 1;
}

/* 图片滑动模块 3 */

input#right_btn3:checked~.inner_main .silde_img:nth-of-type(3) {
    transition: all 0.5s 0.35s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -96px;
    opacity: 1;
}

/* 图片滑动模块 4 */

input#right_btn4:checked~.inner_main .silde_img:nth-of-type(4) {
    transition: all 0.5s 0.35s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -96px;
    opacity: 1;
}

/* 文字滑动模块 */

.inner_main .silde_text>h2 {
    position: relative;
    transition: all 0.5s 0.2s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -100px;
    opacity: 0;

}

.inner_main .silde_text>h3 {
    position: relative;
    transition: all 0.5s 0.25s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    left: -100px;
    opacity: 0;

}

.inner_main .silde_text>p {
    position: relative;
    left: -100px;
    opacity: 0;
    transition: all 0.5s 0.3s cubic-bezier(0.175, 1.605, 0.455, 0.92);

}

/* 文字滑动模块1 */


input#right_btn1:checked~.inner_main .silde_text:nth-of-type(5)>p {
    left: 0;
    transition: all 0.5s 0.5s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn1:checked~.inner_main .silde_text:nth-of-type(5)>h3 {
    left: 0;
    transition: all 0.5s 0.45s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn1:checked~.inner_main .silde_text:nth-of-type(5)>h2 {
    left: 0;
    transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}


/* 文字滑动模块2 */


input#right_btn2:checked~.inner_main .silde_text:nth-of-type(6)>p {
    left: 0;
    transition: all 0.5s 0.5s cubic-bezier(0.175, 1.605, 0.455, 0.92);

    opacity: 1;
}

input#right_btn2:checked~.inner_main .silde_text:nth-of-type(6)>h3 {
    left: 0;
    transition: all 0.5s 0.45s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn2:checked~.inner_main .silde_text:nth-of-type(6)>h2 {
    left: 0;
    transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}


/* 文字滑动模块3 */


input#right_btn3:checked~.inner_main .silde_text:nth-of-type(7)>p {
    left: 0;
    transition: all 300ms 200ms ease-in;
    opacity: 1;
}

input#right_btn3:checked~.inner_main .silde_text:nth-of-type(7)>h3 {
    left: 0;
    transition: all 0.5s 0.45s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn3:checked~.inner_main .silde_text:nth-of-type(7)>h2 {
    left: 0;
    transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

/* 文字滑动模块4 */


input#right_btn4:checked~.inner_main .silde_text:nth-of-type(8)>p {
    left: 0;
    transition: all 0.5s 0.5s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn4:checked~.inner_main .silde_text:nth-of-type(8)>h3 {
    left: 0;
    transition: all 0.5s 0.45s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}

input#right_btn4:checked~.inner_main .silde_text:nth-of-type(8)>h2 {
    left: 0;
    transition: all 0.5s 0.4s cubic-bezier(0.175, 1.605, 0.455, 0.92);
    opacity: 1;
}


input[name="selection"] {
    display: none;
}

/* 图片特效 */

.special {
    position: absolute;
    height: 400px;
    width: 400px;
    left: -125px;
    top: -100px;
    pointer-events: none;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special >div:nth-of-type(1) {
    transform: translateX(2px) translateY(-160px) rotateZ(20deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(2) {
    transform: translateX(200px) translateY(-180px) rotateZ(200deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(3) {
    transform: translateX(40px) translateY(-200px) rotateZ(80deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(4) {
    transform: translateX(20px) translateY(-200px) rotateZ(60deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(5) {
    transform: translateX(-20px) translateY(-200px) rotateZ(120deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(6) {
    transform: translateX(60px) translateY(-200px) rotateZ(260deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(7) {
    transform: translateX(60px) translateY(-200px) rotateZ(220deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(8) {
    transform: translateX(80px) translateY(-140px) rotateZ(90deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(9) {
    transform: translateX(120px) translateY(-120px) rotateZ(90deg);
    opacity: 0;
}

input#right_btn1:checked~.inner_main .silde_img:nth-of-type(1) .special>div:nth-of-type(10) {
    transform: translateX(100px) translateY(-120px) rotateZ(90deg);
    opacity: 0;
}

/* 2 ----------------------2-------------2-----------2--------------- */

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special >div:nth-of-type(1) {
    transform: translateX(2px) translateY(-160px) rotateZ(20deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(2) {
    transform: translateX(200px) translateY(-180px) rotateZ(200deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(3) {
    transform: translateX(40px) translateY(-200px) rotateZ(80deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(4) {
    transform: translateX(20px) translateY(-200px) rotateZ(60deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(5) {
    transform: translateX(-20px) translateY(-200px) rotateZ(120deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(6) {
    transform: translateX(60px) translateY(-200px) rotateZ(260deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(7) {
    transform: translateX(60px) translateY(-200px) rotateZ(220deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(8) {
    transform: translateX(80px) translateY(-140px) rotateZ(90deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(9) {
    transform: translateX(120px) translateY(-120px) rotateZ(90deg);
    opacity: 0;
}

input#right_btn2:checked~.inner_main .silde_img:nth-of-type(2) .special>div:nth-of-type(10) {
    transform: translateX(100px) translateY(-120px) rotateZ(90deg);
    opacity: 0;
}
.special>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 6px;
    height: 20px;
    transition: transform 0.6s 0.36s, opacity 0.99s 0.55s;
}

.special>div:nth-of-type(1) {
    background-color: #de467c;
    transform: translateX(-50%) translateY(-50%) rotateZ(20deg);
}

.special>div:nth-of-type(2) {
    background-color: #de4b46;
    transform: translateX(-50%) translateY(-50%) rotateZ(60deg);
}

.special>div:nth-of-type(3) {
    background-color: #dea146e1;
    transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
}

.special>div:nth-of-type(4) {
    background-color: #deae46;
    transform: translateX(-50%) translateY(-50%) rotateZ(110deg);
}

.special>div:nth-of-type(5) {
    background-color: #46d9deb4;
    transform: translateX(-50%) translateY(-50%) rotateZ(130deg);
}

.special>div:nth-of-type(6) {
    background-color: #9cde46be;
    transform: translateX(-50%) translateY(-50%) rotateZ(160deg);
}

.special>div:nth-of-type(7) {
    background-color: #d946de;
    transform: translateX(-50%) translateY(-50%) rotateZ(200deg);
}

.special>div:nth-of-type(8) {
    background-color: #469ade;
    transform: translateX(-50%) translateY(-50%) rotateZ(220deg);
}

.special>div:nth-of-type(9) {
    background-color: #46debd;
    transform: translateX(-50%) translateY(-50%) rotateZ(240deg);
}

.special>div:nth-of-type(10) {
    background-color: #a9de46;
    transform: translateX(-50%) translateY(-50%) rotateZ(300deg);
}

@keyframes rotate {
    0% {
        transform: rotateZ(0);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

.test {
    display: inline-block;
    width: 42px;
    height: 42px;
    opacity: 0;
    background-color: #469ade;
    position: absolute;
    left: 100px;
    top: 100px;
    -webkit-transition: all 0.5s 0s cubic-bezier(0.175, 1.605, 0.455, 0.92);
}